<template>
  <vg-button @click="open">底部</vg-button>
  <vg-button @click="open2">顶部</vg-button>
  <vg-button @click="open3">左边</vg-button>
  <vg-button @click="open4">右边</vg-button>
  <vg-drawer v-model="visible">
    <div>我是弹出窗</div>
    <div class="btnList">
      <vg-button type="info" @click="close" size="mini">取消</vg-button>
      <vg-button type="primary" size="mini">确认</vg-button>
    </div>
  </vg-drawer>
   <vg-drawer v-model="visible2" direction='ttb'>
    <div>我是弹出窗</div>

    <div class="btnList">
      <vg-button type="info" @click="close2" size="mini">取消</vg-button>
      <vg-button type="primary" size="mini">确认</vg-button>
    </div>
  </vg-drawer>
   <vg-drawer v-model="visible3" direction='ltr'>
    <div>我是弹出窗</div>

    <div class="btnList">
      <vg-button type="info" @click="close3" size="mini">取消</vg-button>
      <vg-button type="primary" size="mini">确认</vg-button>
    </div>
  </vg-drawer>
   <vg-drawer v-model="visible4" direction='rtl'>
    <div>我是弹出窗</div>

    <div class="btnList">
      <vg-button type="info" @click="close4" size="mini">取消</vg-button>
      <vg-button type="primary" size="mini">确认</vg-button>
    </div>
  </vg-drawer>
</template>

<script>
import { defineComponent, ref } from "vue";
import vgButton from "../packages/button";
import vgDrawer from "../packages/drawer/index"
export default defineComponent({
  components: {vgButton,vgDrawer },
  setup() {
    const visible = ref(false);
    const visible2 = ref(false);
    const visible3 = ref(false);
    const visible4 = ref(false);

    function open() {
      console.log("1");
      visible.value = !visible.value;
    }

    function close() {
      visible.value = !visible.value;
    }

    function open2() {
      console.log("1");
      visible2.value = !visible2.value;
    }

    function close2() {
      visible2.value = !visible2.value;
    }

    function open3() {
      console.log("1");
      visible3.value = !visible3.value;
    }

    function close3() {
      visible3.value = !visible3.value;
    }

     function open4() {
      console.log("1");
      visible4.value = !visible4.value;
    }

    function close4() {
      visible4.value = !visible4.value;
    }

    return {
      open,
      close,
      visible,
      open2,
      close2,
      visible2,
      open3,
      close3,
      visible3,
      open4,
      close4,
      visible4,
    };
  },
});
</script>
<style lang="scss">
.btnList {
  & button:nth-child(n + 2) {
    margin-left: 12px;
  }
}
</style>